<template>
    <div class="jp-common-layout page">
        <div class="jp-common-layout-left">
            <div class="jp-common-title"> 
                <el-input
                    placeholder="公司:请输入关键字过滤"
                    size="small"
                    clearable
                    v-model="filterText">
                </el-input>
            </div>
            <div class="jp-common-el-tree-scrollbar el-scrollbar">
                <div class="el-scrollbar__wrap">
                    <div class="el-scrollbar__view">
                        <el-tree
                            class="filter-tree jp-common-el-tree"
                            :render-content="renderContent"
                            :data="officeTreeData"
                            :props="{
                                value: 'id',             // ID字段名
                                label: 'name',         // 显示名称
                                children: 'children'    // 子级字段名
                                }"
                            node-key="id"
                            default-expand-all
                            :filter-node-method="filterNode"
                            :expand-on-click-node="false"
                            highlight-current
                            @node-click="handleNodeClick"
                            ref="officeTree">
                        </el-tree>
                    </div>
                 </div>
            </div>
        </div>
        <div class="jp-common-layout-center jp-flex-main">
            <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
                <el-form-item prop="name">
                <el-input size="small" v-model="searchForm.name" placeholder="姓名" clearable></el-input>
                </el-form-item>
                <!-- <el-form-item prop="office">
                    <el-select  v-model="searchForm.office" placeholder="部门" style="width:100%"  size="small">      
                        <el-option v-for="(item,index) in offices" :label="item.name" :value="item.id" :key="index"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item prop="phone">
                <el-input size="small" v-model="searchForm.phone" placeholder="电话" clearable></el-input>
                </el-form-item>
            <el-form-item>
            <el-button  type="primary" @click="refreshList()" size="small">查询</el-button>
            <el-button @click="resetSearch()" size="small">重置</el-button>
            </el-form-item>
            </el-form>
            <div class="bg-white" style="height:100%">
                <el-table
                    height="calc(100% - 80px)"
                    :row-class-name="tableRowClassName"
                    :data="addressBook"
                    size="small"
                    v-loading="loading"
                    :cell-style="cellStyle" 
                    :header-cell-class-name="cellHeadStyle"
                    style="width:100%; border:1px solid #d6cfe2;"
                    class="table"
                    >
                    <el-table-column
                        prop="name"
                        show-overflow-tooltip 
                        label="姓名"
                        align="center">
                        </el-table-column>
                    <el-table-column
                        prop="office.name"
                        show-overflow-tooltip 
                        label="部门">
                        </el-table-column>
                    <el-table-column
                        prop="post.name"
                        show-overflow-tooltip 
                        label="岗位">
                        </el-table-column>
                    <el-table-column
                        prop="phone"
                        show-overflow-tooltip 
                        label="移动电话">
                        </el-table-column>
                        <el-table-column
                        prop="mobile"
                        show-overflow-tooltip 
                        label="固定电话">
                        </el-table-column>
                    <el-table-column
                        prop="email"
                        show-overflow-tooltip 
                        label="邮箱">
                        </el-table-column>
                </el-table>
                <el-pagination
                    @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle"
                    :current-page="pageNo"
                    :page-sizes="[10,15,20,25]"
                    :page-size="pageSize"
                    :total="total"
                    background
                    layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
    <!-- 弹窗, 新增 / 修改
<AddressBookForm  ref="addressBookForm" @refreshDataList="refreshList"></AddressBookForm> -->
        </div>
    </div>
</template>
<script>
import tableStyles from '../../../utils/mixins.js'
export default {
    mixins: [tableStyles],
    data () {
        return {
            filterText:'',//左边搜索 
            officeTreeData:[],//公司
            addressBook:[],//用户信息
            loading:false,
            pageNo:1,
            pageSize:10,
            total:0,
            companyId:'',
            officeIds:'',
            searchForm: {
                name: '',
                office:'',
                phone:''
            },
            // offices:[],//部门
            companyIds:[],//保存所有子公司id数组
            companyChildren:'',//单个子公司id
            userId:''
        }
    },
    watch: {
      filterText (val) {
        this.$refs.officeTree.filter(val)
      },
    },
    // created(){
    //   window.addEventListener("beforeunload",()=>{
    //     sessionStorage.setItem("userInfo",JSON.stringify(this.$store.state.user))
    //   })
    // },
    activated(){
		this.refreshTree();
		this.refreshList();
    },
    methods: { 
        // getcompanyId(){
        //     //强刷则从浏览器获取公司id
        //     if(this.$store.state.user.id!=''){
        //         var users=this.$store.state.user;
        //     }else{
        //         var users=JSON.parse(sessionStorage.getItem("userInfo"));
        //     }
        //     // this.companyId=users.companyId;//初始化页面有就传，没有仅传用户id  强刷则从浏览器获取
        //     this.userId=users.id;
        //     // console.log(this.userId,'userid',this.companyId)
        //     this.refreshTree();//左边公司
        //     // this.inquireOffice();//查询部门
        // }, 
        renderContent (h, { node, data, store }) {
            return (
                <span class="custom-tree-node">
                    {
                    data.type === '1' ? <i class="fa fa-sitemap"></i> : <i class="fa fa-users"></i>
                    }
                    <span class="text">{node.label}</span>
                </span>
            )
        },
        filterNode (value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        // 获取用户数据列表
        refreshList () {     
            this.loading = true
            this.$http({
                url: '/dlyrl/hr/companyPortal/findUserList',
                method: 'get',
                params: {
                    'pageNo': this.pageNo,
                    'pageSize': this.pageSize,
                    'offices': this.officeIds,
                    'company': this.companyId,
                    ...this.searchForm
                }
            }).then(({data}) => {
                // console.log(data,123)
                if (data && data.success) {
                    this.addressBook = data.list;
                    this.total = data.cont;
                    this.loading = false;
                }
            })
        },
        //查询部门
        // inquireOffice(){
        //     this.$http({
        //         url: '/sys/web/userinfo/findDepartemnt',
        //         method: 'get',
        //         params: {
        //             'id': this.companyId,
        //         }
        //     }).then(({data}) => {
        //         this.offices = data.list;
        //     })
        // },
        refreshTree () {
            this.$http({
              url: `/dlyrl/hr/companyPortal/findOffice`,
              method: 'get',
              params: {
                    'companyId': this.$store.state.user.companyId,
                    'uid':this.$store.state.user.id
                }
            }).then(({data}) => {
                console.log(data,'22')
                if(data){
                    this.officeTreeData = data.list; 
                    if( this.companyId!=''){
                        this.refreshList();
                    }else{
                        this.companyIds=[];
                        data.list[0].children.forEach((val, index) => {
                            this.companyChildren=val.id;
                            this.companyIds.push(this.companyChildren);
                        }) 
                        // this.companyId=this.companyIds.toString();
                        this.refreshList();
                    }                  
                }
            })
        },  
        handleNodeClick (data) {
            console.log(data,'data')
            if (data.grade==1) {
                this.companyIds=[];
                data.children.forEach((val) => {
                    this.companyChildren=val.id;
                    this.companyIds.push(this.companyChildren);
					console.log(this.companyIds)
                })               
                this.companyId=this.companyIds.toString();
                // console.log(this.companyIds,this.companyId)
                this.officeIds= '';
            }else if(data.grade==2){
                this.companyId=data.id; 
                this.officeIds= '';
                // console.log(this.companyId,'2com')
            }else if(data.grade==3){
                this.companyId=''; 
                this.officeIds= data.id;
                // console.log(this.officeIds,'office')              
            }
            this.refreshList();
        },
        // 每页数
        sizeChangeHandle (val) {
            this.pageSize = val;
            this.pageNo = 1;
            this.refreshList();
        },
        // 当前页
        currentChangeHandle (val) {
            this.pageNo = val;
            this.refreshList();
        },
        // 重置搜索
        resetSearch () {
            this.searchForm.name = ''
            // this.searchForm.office = ''
            this.searchForm.phone = ''
            this.filterText = ''
            this.$refs.officeTree.setCurrentKey(null)
            this.$refs.searchForm.resetFields()
            this.refreshTree()
        }
    }
}
</script>
<style>
</style>
  
   